<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt pt10">
          <Form ref="formValidate" :model="formValidate" :label-width="labelWidth" :label-position="labelPosition">
            <Row type="flex" :gutter="24" style="margin-left: 20px;">
				<Col>
				  <FormItem :label="$t('page.customer.customer_name')+'：'" label-for="name">
				    <Input enter-button style="width:300px"  :placeholder="$t('page.customer.input_customer')" v-model="formValidate.name" />
				  </FormItem>
				</Col>
				<Col>
				  <FormItem :label="$t('page.customer.phone')+'：'" label-for="phone">
				    <Input enter-button style="width:300px"  :placeholder="$t('page.customer.input_phone')" v-model="formValidate.phone" />
				  </FormItem>
				</Col>
				<Col>
					<Button type="primary" @click="search" icon="md-search"></Button>
				</Col>
				
    		</Row>
          </Form>
        </Card>

    <Card :bordered="false" dis-hover class="ive-mt tablebox">
      <div class="product_tabs tabbox">
        <Tabs @on-click="onClickTab">
          <TabPane key="1" label="CA" name="month"  aria-checked="true"/>
          <TabPane key="2" label="TX" name="month" :style="{ color: '#999'}"  class="gray-tab" disabled />
        </Tabs>
      </div>
      <div class="btnbox"></div>
      <div class="table">
        <Table
          :columns="columns"
          :data="orderList"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-row
          :no-userFrom-text="$t('page.product.no_data')"
          :no-filtered-userFrom-text="$t('page.product.no_filtering')"
        >

		<template slot-scope="{ row, index }" slot="address">
						<a 
		                  class="address-link" 
		                  :href="generateGoogleMapsLink(row.address)" 
		                  target="_blank"
		                  @click.prevent="openGoogleMaps(row.address)"
		                >
		                  {{ row.address }}
		                </a>
		  </template>
		  <template slot-scope="{ row, index }" slot="createAt">
		    {{ formatTimeNative(row.createAt) }} <!-- 调用格式化方法 -->
		  </template>

        </Table>
        <div class="acea-row row-right page">
          <Page
            :total="total"
            :current.sync="formValidate.page"
            @on-change="pageChange"
            :page-size="formValidate.limit"
          />
        </div>
      </div>
    </Card>
    <commission-details ref="commission"></commission-details>
  </div>
</template>

<script>
import exportExcel from '@/utils/newToExcel.js';
import { customersListApi, exportfundRecordApi } from '@/api/capital';
import timeOptions from '@/utils/timeOptions2';
export default {
  name: 'bill',
  components: {
  },
  data() {
    return {
      total: 0,
      loading: false,
      tab: 'day',
      options: timeOptions,
  //     columns: [
  //       {
  //         title: 'Customer Name',
  //         key: 'name',
  //         width: 230,
  //       },
  //       {
  //         title: 'Location',
  //         slot: 'address',
  //         minWidth: 260,
  //       },
  //       {
  //         title: 'Phone',
  //         key: 'phone',
  //         minWidth: 80,
  //       },
		// {
		//   title: 'url',
		//   key: 'url',
		//   minWidth: 100,
		// },

  //     ],
      orderList: [],
      formValidate: {
        name: '',
		phone:'',
        page: 1,
        limit: 20,
      },
      timeVal: [],
      fromList: {
        title: '选择时间',
        custom: true,
        fromTxt: [
          { text: '全部', val: '' },
          { text: '昨天', val: 'yesterday' },
          { text: '今天', val: 'today' },
          { text: '本周', val: 'week' },
          { text: '本月', val: 'month' },
          { text: '本季度', val: 'quarter' },
          { text: '本年', val: 'year' },
        ],
      },
    };
  },
  computed: {
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'left';
    },
	columns(){
		return [
		  {
		    title: $t('page.customer.customer_name'),
		    key: 'name',
		    width: 230,
		  },
		  {
		    title:  $t('page.customer.location'),
		    slot: 'address',
		    minWidth: 260,
		  },
		  {
		    title: $t('page.customer.phone'),
		    key: 'phone',
		    minWidth: 80,
		  },
		{
			title: $t('page.customer.url'),
			key: 'url',
			minWidth: 100,
		},
		
		]
	}
  },
  watch: {
    tab: {
      handler() {
        this.getList();
      },
      immediate: true,
    },
  },
  methods: {
	  /**
	       * 生成谷歌地图链接
	       * @param {string} address - 要搜索的地址
	       * @returns {string} 谷歌地图URL
	       */
	      generateGoogleMapsLink(address) {
	        // 对地址进行URL编码
	        const encodedAddress = encodeURIComponent(address);
	        return `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
	      },
	      
	      /**
	       * 打开谷歌地图（备选方法）
	       * @param {string} address - 要搜索的地址
	       */
	      openGoogleMaps(address) {
	        const url = this.generateGoogleMapsLink(address);
	        window.open(url, '_blank');
	      },
	  allReset(){
	    this.formValidate.name = '';
	    this.formValidate.phone = '';
		this.getList();
	  },
	  //搜索
	  search() {
	    this.formValidate.page = 1;
		this.getList();
	  },
    onClickTab(e) {
      this.tab = e;
    },
	// 时间格式化方法
	// 原生 JS 格式化
	formatTimeNative(timestamp) {
	      const date = new Date(timestamp);
	      const year = date.getFullYear();
	      const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
	      const day = String(date.getDate()).padStart(2, '0');
	      const hours = String(date.getHours()).padStart(2, '0');
	      const minutes = String(date.getMinutes()).padStart(2, '0');
	      
	      return `${year}-${month}-${day} ${hours}:${minutes}`;
	},
    getList() {
      this.loading = true;
      let data = {
        timeType: this.tab,
        name: this.formValidate.name,
		phone: this.formValidate.phone,
        page: this.formValidate.page,
        limit: this.formValidate.limit,
      };
      customersListApi(data).then((res) => {
        this.orderList = res.data.list;
		console.log("哈哈哈哈哈")
		console.log(this.orderList)
        this.loading = false;
        this.total = res.data.count;
      });
    },
    // 选择时间
    selectChange(tab) {
      this.formValidate.page = 1;
      this.formValidate.data = tab;
      this.timeVal = [];
      this.getList();
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.formValidate.data = this.timeVal[0] ? this.timeVal.join('-') : '';
      this.formValidate.page = 1;
      this.getList();
    },
    //分页
    pageChange(status) {
      this.formValidate.page = status;
      this.getList();
    },
    // 账单详情
    Info(row) {
      this.$refs.commission.modals = true;
      this.$refs.commission.getList(row.ids);
    },
    //下载
    async download(row) {
      let [th, filekey, data, fileName] = [[], [], [], ''];
      let excelData = { ids: row.ids, page: 1 };
      let lebData = await this.getExcelData(excelData);
      if (!fileName) {
        fileName = lebData.filename;
      }
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) {
        th = lebData.header;
      }
      data = [...data, ...lebData.export];
      exportExcel(th, filekey, fileName, data);
    },
    getExcelData(excelData) {
      return new Promise((resolve) =>
        exportfundRecordApi(excelData).then((res) => resolve(res.data))
      );
    },
  },
};
</script>

<style scoped lang="less">
/deep/.ivu-page-header,
/deep/.ivu-tabs-bar {
  border-bottom: 1px solid #ffffff;
}
/deep/.ivu-card-body {
  padding: 0;
}
/deep/.ivu-tabs-nav {
  height: 45px;
}

/deep/.ivu-tabs-bar {
  margin-bottom: 0px !important;
  border-bottom: 1px solid #e9e9e9 !important;
}
.tabbox {
  padding: 16px 20px 0px;
}
.box {
  padding: 20px;
  padding-bottom: 1px;
}
.tablebox {
  margin-top: 15px;
  padding-bottom: 10px;
}
.btnbox {
  padding: 20px 0px 0px 30px;
  .btns {
    width: 99px;
    height: 32px;
    background: #1890ff;
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
    color: #ffffff;
    cursor: pointer;
  }
}
.table {
  padding: 0px 30px 15px 30px;
}
.search {
  width: 86px;
  height: 32px;
  background: #1890ff;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}

.reset {
  width: 86px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid rgba(151, 151, 151, 0.36);
  text-align: center;
  line-height: 32px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-weight: 500;
  color: #515a6e;
  // background: #2D8CF0;

  cursor: pointer;
}
.ivu-form-item-label{
	width: 40px;;
}
.address-link {
  color: #2d8cf0;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.3s;
}

.address-link:hover {
  color: #57a3f3;
  text-decoration: none;
}
.gray-tab {
  color: #999 !important;
}
</style>
